<template>
	<view class="shaixuan-filter" v-show="timePop">
		<view style="padding-bottom: 140rpx;">
			<view class="title">选择时间段</view>
			<!-- <view class="popup-mask" @click="close"></view> -->
			<view class="filter-cont ">
				<view class="timeList">
					<view :key='index' class="time-list"  v-for="(item,index) in dataList" style="position: relative;">
						<u-tag :type="memeryVal=== item.key ? 'primary' : 'info'"
							:plain="memeryVal=== item.key ? true : false"  
							:text="item.value" @click='()=>timeClick(item.key)'>
						</u-tag>
					</view>
				</view>
				
			</view>
			<view class="title">自定义时间</view>
			<view>
				<view>
					<uni-datetime-picker  ref="datetimePicker" v-model="dateRange"
						type="daterange" :start="beforeDate" start-placeholder="开始日期" end-placeholder="结束日期"  
						:end="nowDate" rangeSeparator="至" @change="changeDate($event,i)">
						<view class="zidingyi" :class="zidingyActive ? 'active' :''" @click="zidingyClick('5')" v-if="stime =='' && etime==''">
							开始时间  <text>至</text>   结束时间
						</view>
						<view class="zidingyi" :class="zidingyActive ? 'active' :''" @click="zidingyClick('5')" v-else>
							{{stime}}  <text>至</text>  {{etime}}
						</view>
					</uni-datetime-picker>
				</view>
			</view>
		</view>
		
		<view class="filter-foot d-f">
			<view class="cancel-btn" @click="reset"><image src="https://img.bidcenter.com.cn/uni/chongzhi.png" class="chongzhiIcon"></image>重置</view>
			<view class="confirm-btn" @click="confirm">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		timeList,
		timeObj
	} from '@/util/diction.js'
	export default {
		name: "list-time",
		props: ['timePop', 'initTimeCheck',"startDate","endDate","dateText"],
		emits:['searchFn'],
		data() {
			let list = timeList.filter(item=> item.key >3)
			
			return {
				dataList: list,
				memeryVal: this.initTimeCheck,
				// 注：reset数据不会更新，仅仅用于重置操作
				resetDefault:this.initTimeCheck,
				dateRange: [],
				beforeDate: Date.now() - 7200000 * 24 * 365,
				nowDate: Date.now(),
				zidingyActive:false,
				timeObj:timeObj,
				stime:this.startDate,
				etime:this.endDate,
			};
		},

		created() {
			// console.log(this.stime,this.etime)
		},

		methods: {
			timeClick(key) {
				this.zidingyActive=false
				this.memeryVal=key;
				this.stime=''
				this.etime=''
				// this.confirm()
			},
						
			close() {
				this.$emit('update:timePop', false)
				this.memeryVal=this.initTimeCheck;
			},
			
			reset(){
				// 为初始化页面时的默认数据
				this.memeryVal=this.resetDefault;
				this.dateRange=[]
				this.stime=''
				this.etime=''
				this.zidingyActive=false
			},
			
			confirm() {
			  if (this.memeryVal == 5 ) {
				  this.$emit('update:dateText', this.stime + "至" + this.etime)
			
			  } else {
				  this.$emit('update:dateText', this.timeObj[this.memeryVal])
			  }
			  this.$emit('update:startDate', this.stime)
			  this.$emit('update:endDate',   this.etime)
				this.$emit('update:timePop', false)
				this.$emit('update:initTimeCheck', this.memeryVal)
				
				this.$emit('searchFn')
			},
			changeDate(event, i) {
				console.log(event)
				this.stime=event[0]
				this.etime=event[1]
				// this.confirm()
			},
			zidingyClick(val){
				this.zidingyActive=true
				this.memeryVal=val
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/qiqing.scss';
	.shaixuan_box {
		position: relative;
		padding: 0 30rpx 20rpx 30rpx;
		.shaixuan-filter {
			padding: 0 30rpx 20rpx 30rpx;
			position: fixed;
			top: 272rpx;;
			left: 0rpx;
			width: 100%;
			height: 100vh;
			z-index: 9999;

			.popup-mask {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.6);
			}

			.filter-cont {
				background-color: #FFFFFF;
				position: relative;
				padding: 15rpx 0 0rpx;

				.time-list {
					padding: 18rpx 30rpx;
					font-size: 26rpx;
					position: relative;

					&.active {
						background-color: #fbefe1;
						color: #ff6917;

						&::after {
							content: '';
							background: url(https://img.bidcenter.com.cn/uni/ihao.png) no-repeat;
							width: 26rpx;
							height: 17rpx;
							background-size: 100% 100%;
							position: absolute;
							right: 30rpx;
							top: 28rpx;
						}
					}
				}

				.filter-foot {
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;

					.cancel-btn {
						width: 40%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background-color: #f4f6f7;
						color: #999999;
						font-size: 30rpx;
					}

					.confirm-btn {
						width: 60%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background-color: #ff6917;
						color: #ffffff;
						font-size: 30rpx;
					}
				}		
			}		
		}
	}
	.shaixuan-filter {
		padding: 0 30rpx 20rpx 30rpx;
		::v-deep .u-tag--primary--plain {
			border-color: #2478fe !important;
			background: rgba(47, 109, 254, 0.06) !important;
			
			.u-tag__text--primary--plain {
				color: #2478fe !important;
				font-size: 24rpx;
			}
		}
		.timeList{
			display: flex;
			flex-wrap: wrap;
			> view {
				margin: 10rpx 1%;
			}
			
		}
	}
	.filterCont2 {
		.title {
			padding: 22rpx 0;
			font-size: 28rpx;
			color: #3b3e45;
			font-weight: bold;
			// margin-left: 1%;
		}
	}

	.zidingyi {
		width:60%;
		font-size: 24rpx;
		color: #3B3E45;
		text-align: center;
		height: 57rpx;
		line-height: 57rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		border: 1rpx solid #F6F8FA;
		background-color: #F6F8FA;
	
		&.active {
			color: #2478FE;
			border-color: #2478FE;
			background-color: rgba(47, 109, 254, 0.06);
		}
		text{
			margin: 30rpx;
		}
	}
	
</style>
<style lang="scss">
	
	
</style>